<template>
    <div class="platform">
        <my-tag title="作品详情" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-width="130px" label-position="left"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="作品名称" prop="schemeName">{{ form.schemeName }}</el-form-item>
                    <el-form-item label="小区名称" prop="address">{{ form.address }}</el-form-item>
                    <el-form-item label="设计理念" prop="designIdea">{{ form.designIdea }} </el-form-item>
                    <el-form-item label="户型图" prop="layoutIds">
                        <image-preview v-for="v in form.layoutImageUrl" :key="v.ossId" :src="v.url" :width="100"
                            :height="100" style="margin:0 10px 10px 0"></image-preview>
                    </el-form-item>
                    <el-form-item label="房间区域相册">
                        <el-table :data="storeAllSpace">
                            <el-table-column>
                                <template #default="scope">
                                    <div class="room-space">
                                        <div class="space-title">
                                            <div class="title">{{ scope.row.schemName }} </div>
                                        </div>
                                        <div class="space-img">
                                            <image-preview v-for="v in scope.row.schemImgUrl" :key="v.ossId" :src="v.url"
                                                :width="100" :height="100" style="margin:0 10px 10px 0"></image-preview>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="封面图片" prop="coverImage">
                        <div class="coverImg-style">
                            <image-preview :src="form.coverImageUrl" :width="200" :height="180"
                                style="margin:0 10px 10px 0"></image-preview>
                        </div>
                    </el-form-item>
                    <el-form-item label="面积(㎡)" prop="area">{{ form.area || '---' }} </el-form-item>
                    <el-form-item label="参考预算价(万元)" prop="priceLower">{{ parseFloat(form.priceLower) / 10000 }} ~ {{
                        parseFloat(form.priceUpper) / 10000 }}</el-form-item>
                    <el-form-item label="户型">
                        {{ form.bedrooms }}室 {{ form.livingRooms }}厅 {{ form.bathrooms }}卫 {{ form.kitchens }}厨
                    </el-form-item>
                    <el-form-item label="风格" prop="style">{{ form.style }}</el-form-item>
                    <el-form-item label="审核状态" prop="schemStatus">
                        <dict-tag :options="schem_status" :value="form.schemStatus" />
                    </el-form-item>
                    <el-form-item label="未通过原因" prop="remark" v-if="form.schemStatus === 2">
                        {{ form.remark }}
                    </el-form-item>
                </div>
            </el-form>

            <div class="platform-submit-btn">
                <el-button class="default-btn" @click="cancel">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl, getPlatformWorkDetail } from "@/api/decor/designer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const { schem_status } = proxy.useDict('schem_status');
let storeAllSpace = ref([])
const data = reactive({
    form: {},
});
const { form } = toRefs(data);
// 获取设计方案详情信息
(() => {
    const schemeId = route.params.schemeId
    if (schemeId) {
        getPlatformWorkDetail(schemeId).then((res) => {
            let editSchemData = res.data
            let _temp = []
            editSchemData.coverImageUrl = '';
            editSchemData.layoutImageUrl = '';
            let imgUrlPromises = [];
            // 获取封面图的异步操作
            if (editSchemData.coverImage) {
                let avatarPromise = getImgUrl(editSchemData.coverImage).then((res) => {
                    editSchemData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(avatarPromise);
            }
            if (editSchemData.layoutIds) {
                // 获取户型图片的异步操作
                let coverImagePromise = getImgUrl(editSchemData.layoutIds).then((res) => {
                    editSchemData.layoutImageUrl = res.data;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            res.data.schemDetails.forEach((v) => {
                if (v.schemImgId) {
                    let promise = getImgUrl(v.schemImgId).then((res) => {
                        _temp.push({
                            schemName: v.schemName,
                            schemImgId: v.schemImgId,
                            classTypeId: v.classTypeId,
                            schemImgUrl: res.data,
                            schemDetailId: v.schemDetailId,
                            version: v.version
                        });
                    });
                    imgUrlPromises.push(promise);
                }
            })
            // 等待所有图片 URL 获取完成
            Promise.all(imgUrlPromises).then(() => {
                // 所有异步操作完成后再进行后续处理
                storeAllSpace.value = _temp
                form.value = editSchemData
            });
        })
    }
})();
// 返回
const cancel = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 4px 0 4px;
        }
    }
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}

::v-deep(.el-table) {
    border: none !important;
}

::v-deep(.el-table .cell) {
    padding: 0;
}

::v-deep(.el-table .el-table__cell) {
    padding: 0;
}

::v-deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    height: 0 !important;
    background-color: transparent !important;
}

::v-deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
    border-bottom: none;
}
</style>